<script setup lang="ts">
const { type } = defineProps(['type'])
let { wechatModel, loginModel, registerModel } = $(useModel())

const toWechat = () => {
  wechatModel = true
  if (type === 'login') {
    loginModel = false
    registerModel.base = true
  }
}
</script>

<template>
  <div class="oAuthLogin">
    <cdn-img src="/images/wechat_icon.png" w-70px h-70px @click="toWechat" />
  </div>
</template>

<style lang="less" scoped>
.oAuthLogin {
  display: flex;
  margin-top: 12px;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;

  &>* {
    padding: 8px;
    margin: 0 20px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
  }

  .wechat {
    color: #00c86a;
    background-color: #e1ffe0;
  }
}
</style>